<template>
<!--  能耗信息-->
  <div class="ur-card">
    <card-header :title="'能耗信息'" :hasBackground="true"></card-header>
    <div class="ur-card-body d-flex justify-content-between pl-0 pr-3" :class="{active:statisticIndex==3}">
      <!-- 历史能耗-->
      <div class=" position-relative " style="width:250px;flex: none;">
        <title-mark class="ml-3" :title="'历史能耗'"></title-mark>
        <div class="float-right mr-3 position-absolute" style="right:0;z-index: 2">
          <el-button @click="query1('year',2)" size="mini" :class="{active:historyEnergyType=='year'}" class="m-0 d-inline-block ur-btn ur-btn-mini">年</el-button>
          <el-button @click="query1('month',1)" size="mini" :class="{active:historyEnergyType=='month'}" class="m-0 d-inline-block ur-btn ur-btn-mini">月</el-button>
          <el-button @click="query1('day',0)" size="mini" :class="{active:historyEnergyType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini">日</el-button>
        </div>
        <div id="myChart1" style="height: 150px;width: 250px;margin-top: -20px" ref="echarts1" ></div>
      </div>
      <div class="p_relative" style="flex:1;">
        <title-mark :title="'总能耗'"></title-mark>
        <div class="d-flex p_absolute" style="right: 0;z-index: 999;">
          <el-button size="mini" @click="query2('day',0)" :class="{active:electricityTimeType=='day'}" class="m-0 d-inline-block ur-btn ur-btn-mini w40">昨日</el-button>
          <el-button size="mini" @click="query2('year',1)" :class="{active:electricityTimeType=='year'}"  class="m-0 ur-btn d-inline-block ur-btn-mini w40">累计</el-button>
        </div>
        <div id="myChart2" class="w-100 p_absolute" :style="{'height':height+'px'}" style="top:8px;" ref="echarts2" ></div>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import chart from 'api/chart'
  import cardHeader from "base/card-header"
  import titleMark from "base/titleMark"
  import energyData from 'static/data/energyData'

  export default {
    components: {cardHeader,titleMark},
    props: {
      height:0,
      isRefresh:false,
      statisticIndex:{
        type:Number,
        default:3
      }
    },
    data() {
      return {
        myChart:null,
        historyEnergyChart: null,
        historyEnergyType:'day',
        electricityTimeType:'day',
        typeIndex1:0,
        typeIndex2:0,
      }
    },
    watch: {
      statisticIndex:{
        handler(newValue, oldValue) {
          this.statisticIndex = newValue
        },
        deep: true
      },
      historyEnergyType(type){
        this.historyEnergyData(type)
      },
      electricityTimeType(type){
        this.energyStatisticChart(type)
      },
      isRefresh:{
        handler(newValue, oldValue) {
          this.isRefresh = newValue
          if(newValue){
            this.setTimer()
          }else{
            this.$store.commit('timer/clearEnergyTimer')
          }
        },
        deep: true
      }
    },
    computed: {},
    methods: {
      query1(type,index){
        this.typeIndex1=index
        this.historyEnergyType=type
      },
      query2(type,index){
        this.typeIndex2 = index
        this.electricityTimeType=type
      },
      historyEnergy(){//历史能耗
        this.historyEnergyChart=chart.barChart('myChart1')
        this.historyEnergyData('day')
      },
      //历史能耗数据
      async historyEnergyData(type){
        this.historyEnergyType = type
        let res = await api.fetchSimple('/OverView/TotalEnergy', {type: type})
        let data = res?res:[]
        let xDatas = [], yDatas = []
        for (let i = 0; i < data.length; i++) {
          if (type == 'year') {
            xDatas.push(api.formatDate(data[i].Date, 'yyyy'))
          } else if (type == 'month') {
            xDatas.push(api.formatDate(data[i].Date, 'yyyy-MM'))
          } else {
            if(i<data.length-1){//去掉当天
              xDatas.push(api.formatDate(data[i].Date, 'MM-dd'))
            }
          }
          //三和数据造假
          if(api.ajaxServe=='http://39.100.245.87:8888/'){
            if(type == 'month'){
              yDatas.push(energyData.monthData[i].Actual||data[i].Actual)
            }else if(type == 'year'){
              yDatas.push(energyData.yearData[i].Actual||data[i].Actual)
            }else{
              yDatas.push(data[i].Actual)
            }
          }else {
            yDatas.push((data[i].Actual*window.InitData.EnergyVal).toFixed(2)) //阿尔伦斯
            // yDatas.push(data[i].Actual)
          }
        }
        this.historyEnergyChart.setOption({
          tooltip: {
            formatter: '时间：{b0}<br/>能耗：{c0}kwh'
          },
          xAxis: {data: xDatas},
          series: [{
            name: '能耗', type: 'bar', data: yDatas, barMinHeight: 3, barMaxWidth: 8,
            itemStyle: {
              normal: {barBorderRadius: [50, 50, 0, 0]}
            }
          }]
        })
      },
      energyStatisticChart(type){//总能耗
        this.electricityTimeType = type
        let chartOption = {
          title: {text: '', x: 'center'},
          tooltip: {
            show:false,
            trigger: 'item',
            formatter: "{b}: {c} ({d}%)"
          },
          series: [
            {
              type: 'pie', radius: ['70%', '80%'],
              hoverAnimation:false,
              center: ["50%", "60%"],
            }
          ],
          color:[
            new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {offset: 0, color: '#4E2DF2'},
                  {offset: 1, color: '#FF3C00'}
                ]),'#1D2045']
        }
        this.myChart = echarts.init(document.getElementById('myChart2'))
        this.myChart.setOption(chartOption)

        this.energyStatisticData(type)
      },
      energyStatisticData(type){
        this.electricityTimeType=type
        api.fetchSimple('/ViewInfo/SystemEnergy', {})
            .then(r=>{
              let res=0
              if(api.ajaxServe=='http://39.100.245.87:8888/'){//三和数据
                res = type == 'day' ? r.YestodayEnergy :9872394.53
              }else{
                res = type == 'day' ? r.YestodayEnergy : r.AllEnergy
                res = (res * window.InitData.EnergyVal).toFixed(2) //阿尔伦斯
              }
              let txt='累计'
              if(type=='day'){
                this.$emit('getYActual',res)
                txt='昨日'
              }
              this.myChart.setOption({
                series: [{
                  label: {
                    normal: {
                      show: true,
                      position: 'center',
                      formatter:function (argument) {
                        var html;
                        html=res+'\r\n\r\n'+'kwh';
                        return html;
                      },
                      textStyle:{fontSize: 14, color:'#BFCFEF'}
                    }
                  },
                  data:[{ name: txt,value:res}]
                }]
              })
            })
      },
      setTimer(){
        let _this=this
        let types=['day','month','year']
        let types2=['day','year']
        this.$store.commit('timer/setEnergyTimer',setInterval(()=>{
          _this.typeIndex1++
          if (_this.typeIndex1 == 3) _this.typeIndex1 = 0
          _this.typeIndex2 = _this.typeIndex2 == 0 ? 1 : 0
          _this.historyEnergyType = types[_this.typeIndex1]
          _this.electricityTimeType = types2[_this.typeIndex2]
        },60000))
      }
    },
    created() {
      this.setTimer()
    },
    mounted() {
      this.historyEnergy()
      this.energyStatisticChart('day')
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
